<template>
  <div>
    <div>
      <el-form :inline="true" :model="param">
        <el-col :span="7">
          <el-form-item label="报修内容">
            <el-input @clear="findRepair" v-model="param.remark" placeholder="模糊筛选" clearable
                      prefix-icon="el-icon-search"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item></el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" @click="findRepair">查询</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div style="margin-bottom: 10px ;">

      <el-table ref="userTable" :data="tableData" :stripe="true" :border="true"
                style="width: 100%">
        <el-table-column prop="house" label="报修茶室" width="100"></el-table-column>
        <el-table-column prop="createName" label="报修人" width="70"></el-table-column>
        <el-table-column prop="createTime" label="报修时间"></el-table-column>
        <el-table-column prop="remark" label="报修备注" width="300"></el-table-column>
        <el-table-column prop="okTime" label="完成时间"></el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template v-slot="{row}">
            <el-tag type="danger" v-if="row.status === 1" size="small">未处理</el-tag>
            <el-tag v-if="row.status === 2" size="small">处理中</el-tag>
            <el-tag type="success" v-if="row.status === 3" size="small">完 成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="scope">
            <el-button @click="down(scope.row)"  :disabled="scope.row.status === 3||scope.row.status === 2" type="text" size="small">去处理</el-button>
            <el-button @click="okTime(scope.row)" :disabled="scope.row.status === 3" type="text" size="small">已完成</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background :page-sizes="[8, 16, 30]" @current-change="pageChange($event)"
                     :page-size=this.param.size @size-change="sizeChange($event)"
                     layout="total,prev,pager,next,sizes" :total="total" small>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Repair",
  data() {
    return {
      userInfo: [],
      tableData: [],
      total: 0,
      param: {
        remark: '',
        page: 1,
        size: 8,
      },
      repair:{
      },
      house:{}
    }
  },
  mounted() {
    this.findRepair();
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
  },
  methods: {
    findRepair() {
      this.$axios.get('/api/com/findRepair', {params: this.param}).then(res => {
        if( res.data.status === 1){
          this.tableData = res.data.data.list
          this.total = res.data.data.total;
        }else {
          this.$notify({
            title: '提示',
            message: '查询失败',
            type: 'error'
          });
        }
      }).catch(e => console.log(e));
    },
    down(row) {
      console.log(row)
      this.repair.id = row.id
      this.repair.status = 2
      this.upApi()
    },
    okTime(row) {
      console.log(row)
      this.repair.id = row.id
      this.repair.status = 3
      this.upApi()
      this.house.id = row.houseId
      this.house.isUse = 1
      this.houseApi()
    },
    upApi() {
      this.$axios.post('/api/com/upRepair', this.repair).then(res => {
        if (res.data.status === 1) {
          this.$notify({
            title: '提示',
            message: '操作成功',
            type: 'success'
          });
          this.findRepair()
        } else {
          this.$notify({
            title: '提示',
            message: res.data.message,
            type: 'error'
          });
        }
      })
    },
    houseApi(){
      this.$axios.post('/api/house/upHouse', this.house).then(res => {
        if (res.data.status === 1) {
          this.$notify({
            title: '提示',
            message: '房间已上架',
            type: 'success'
          });
        } else {
          this.$notify({
            title: '提示',
            message: res.data.message,
            type: 'error'
          });
        }
      })
    },
    pageChange(page) {
      this.param.page = page;
      this.findRepair()
    },
    sizeChange(size) {
      this.param.size = size;
      this.findRepair()
    },
  },

}
</script>

<style scoped>

</style>
